﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Getting Started with JavaScript Client Pages</title>
    <link rel="Stylesheet" type="text/css" href="Stylesheet.css" />
    <link rel="Stylesheet" type="text/css" href="Simple.css" />    
</head>
<body lang="en-ca">
    <div id="header">
        <span class="technology">
            JavaScript Client Pages
        </span>
        <span class="title">
            Developer's Manual
        </span>       
        <span class="sub-title">
            Getting Started
        </span>
    </div>
    <div id="body">
        <h1 id="header-getting-started">Getting Started</h1>
        <p>
            Developing client-side code using JavaScript has never been easier! To get
            started please click on one of the following links depending on the platform
            you are planning to use:
        </p>
            
        <ul>
            <li>
                <a href="#header-getting-started-with-aspx">Getting Started with ASP.net</a>
            </li>
            <li>
                <a href="#header-getting-started-with-php">Getting Started with PHP</a>                            
            </li>
        </ul>       
        <h1 id="header-getting-started-with-aspx">Getting Started with ASP.net</h1>
        
        <h2>Prerequisites</h2>    
        <p class="note">
            <span class="emphasis">Important Note:</span> This tutorial was written under the assumption that you 
            have access to the <span class="emphasis">Microsoft&reg;</span> implementation of the .NET 
            platform version 3.5 or above, 
            as well as one of the following IDEs:                
        </p>
        <ul>
            <li>
                Microsoft&reg; Visual Web Developer (Freeware)
                <div class="download">
                    This IDE is available as a free download from <a href="http://www.microsoft.com/express/">this Web site</a>.                
                </div>
            </li>
            <li>Microsoft&reg; Visual Studio (Commercial)</li>
        </ul>
        <p>
            It should be noted that JavaScript Server Pages can be used on other implementations of the .NET
            Framework, nor do they require an IDE. However, this tutorial does not address those cases simply
            because they have not been thoroughly research and tested yet.
        </p>
        <h2>First Steps</h2>
        <ol>
            <li>
                Download the latest release from 
                <a href="http://www.codeplex.com/JSClientPages/Release/ProjectReleases.aspx">the project site</a>
            </li>
            <li>
                Unpack <span class="file-name">JavaScriptClientPages-DotNet.zip</span> into your 
                <span class="file-name">WebSites</span> directory
                <div class="example">
                    <div class="label">Example:</div>
                    <div class="file-name">C:\Users\User\Documents\Visual Studio 2008\WebSites\JavaScriptClientPages</div>
                </div>
            </li>
            <li>Open your <span class="software-title">Visual Studio</span> 
                Family IDE</li>
            <li>In the <span class="ui-element">File</span> menu, select
                <span class="ui-element">Open Web Site...</span></li>
            <li>Select the directory where you unpacked the archive</li>
        </ol>
        <h2>Creating a JavaScript Client Page</h2>
        <ol>
            <li>
                In the <span class="ui-element">Solution Explorer</span>, right-click
                on the <span class="file-name">jscp</span> directory
            </li>
            <li>
                Select <span class="ui-element">Add - New Item...</span>
            </li>
            <li>
                Find and select "<span class="ui-element">XML Document</span>"
            </li>
            <li>Change the file name to <span class="file-name">HelloWorld.xml</span></li>
            <li>
                Copy and paste the code below into the XML document you have just
                created
            </li>
        </ol>    
        <p>
            <span class="emphasis">Important Note:</span> Although it is also possible to use the 
            <span class="ui-element">HTML Page</span> template in this situation, it is better
            to use an XML document instead in order to enable IntelliSense with custom schemas,
            as well as to prevent the IDE from treating &lt;?js ... ?&gt; processing instructions
            occurring within certain elements (e.g. tables) as syntax errors.
        </p>
        <div class="code">
            &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
            <div class="indent">
                &lt;head&gt;
                    <div class="indent">
                        &lt;title&gt;Getting Started with JSCP - Hello World&lt;/title&gt;<br />
                        &lt;meta name="JSClientPage" content="HelloWorld" /&gt;
                    </div>
                &lt;/head&gt;<br />                
                &lt;body&gt;
                    <div class="indent">
                    &lt;h1&gt;My First JSCP Page&lt;/h1&gt;<br />
                    &lt;p&gt;
                        <div class="indent">
                        Hello &lt;?js text(input.name); ?&gt;! I am a JavaScript Client Page.
                        </div>
                    &lt;/p&gt;
                    </div>
                &lt;/body&gt;
            </div>
            &lt;/html&gt;      
        </div>
        <h2>Invoking the Page from Client Code</h2>

        <ol>
            <li>
                In the <span class="ui-element">Solution Explorer</span>, right-click on the
                project and select <span class="ui-element">Add - New Item...</span>
            </li>
            <li>
                Find and select the "<span class="ui-element">HTML Page</span>" template
            </li>
            <li>
                Change the file name to HelloWorld.html
            </li>
            <li>
                Add a reference to the JSCP JavaScript library to the &lt;head&gt; element:
                <div class="code">
    &lt;script type="text/javascript" href="JSClientPages.js"&gt;&lt;/script&gt;
                </div>
            </li>
            <li>
                Add a request to the JSCP compiler for the HelloWorld page you have just
                created (<span class="file-name">HelloWorld.xml</span>)
                <div class="code">
    &lt;script type="text/javascript" href="JSClientPage.ashx?page=<span class="highlight">HelloWorld.xml</span>"&gt;&lt;/script&gt;
                </div>            
            </li>
            <li>
                Add the XHTML code for user input to the body:
                <div class="code">
                    Your Name: &lt;input type="text" name="name" id="input-name" value="John Doe" /&gt;<br />
                    &lt;br /&gt;<br />
                    &lt;button onclick="go(); return false;"&gt;Go!&lt;/button&gt;<br />
                    &lt;div id="hello-world-container"&gt;&lt;/div&gt;<br />
                </div>
            </li>
            <li>
                Create an event handler function that renders the JavaScript
                client page:
                <div class="code">
                    &lt;script type="text/javascript"&gt;
                        <div class="indent">
                            <span class="keyword">function</span> go() {
                                <div class="indent">
                                    JSClientPage.render(
                                        <div class="indent">
                                        'HelloWorld',               // the name of the page to render (from the meta tag) <br />
                                        'hello-world-container',    // The destination container <br />
                                        {
                                            <div class="indent">
                                                name: document.getElementById('input-name').value
                                            </div>
                                        }
                                        </div>
                                    );
                                </div>
                                }
                        </div>
                    &lt;/script&gt;            
                </div>
            </li>
        </ol>
        <p>
            That's it! The programming part is done. 
        </p>    
        <h2>Testing your Application</h2>
        <ol>
            <li>Press <span class="ui-element">Ctrl+F5</span> to run your application in a Web browser</li>        
            <li>Type your name in the <span class="ui-element">Your Name</span> field</li>
            <li>Click on the Go button</li>
            <li>
               The page will be rendered below the Go button, and it will say "hello" to you.
            </li>
        </ol>
        <h1 id="header-getting-started-with-php">Getting Started with PHP</h1>
        <h2 id="header-getting-started-with-php-prerequisites">Prerequisites</h2>    
        <ul>
            <li>PHP 5.2.x</li>
            <li>
                The XSLT extension, which is bundled with PHP 5.x
                (the one that is described in the PHP manual under 
                "<a href="http://ca.php.net/manual/en/book.xsl.php">XSL Functions</a>")
            </li>
        </ul>
        <div class="warning">
            <span class="warning">Warning:</span> The bundled PHP-based JavaScript Client 
            Pages compiler 
            <span class="emphasis">will not work</span> with the XSLT processor bundled with
            PHP 4.x or any other XSLT processors bundled with PHP. While it might be possible to
            retrofit it, the steps involved in doing so are beyond the scope of this document.
        </div>
        <div>
            <span class="warning">Warning:</span> Due to the diversity of tools encountered
            in the PHP community and the lack of a dominant development environment, no 
            instructions will be given for specific editors or IDEs. Also, enabling code 
            completion in the various PHP IDEs available on the market is beyond the scope
            of this document.
        </div>
        <h2>First Steps</h2>
        <ol>
            <li>
                Download the latest release from 
                <a href="http://www.codeplex.com/JSClientPages/Release/ProjectReleases.aspx">the project site</a>
            </li>
            <li>
                Unpack <span class="file-name">JavaScriptClientPages-PHP.zip</span> into your 
                Web server&#39;s document root or any other directory that can be<br />
                accessible through the Web<div class="example">
                    <div class="label">Example:</div>
                    <div class="file-name">/var/www/html/JavaScriptClientPages</div>
                </div>
            </li>
        </ol>
        <h2>Creating a JavaScript Client Page</h2>
        <ol>
            <li>
                Create a file named <span class="file-name">HelloWorld.xml</span> in the 
                <span class="file-name">jscp</span> directory within the directory where
                you extracted the original release
            </li>
            <li>
                Copy and paste the code below into the XML document you have just
                created
            </li>
        </ol>    
        <div class="code">
            &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
            <div class="indent">
                &lt;head&gt;
                    <div class="indent">
                        &lt;title&gt;Getting Started with JSCP - Hello World&lt;/title&gt;<br />
                        &lt;meta name="JSClientPage" content="HelloWorld" /&gt;
                    </div>
                &lt;/head&gt;<br />
                &lt;body&gt;
                    <div class="indent">
                        &lt;h1&gt;My First JSCP Page&lt;/h1&gt;<br />
                        &lt;p&gt;
                            <div class="indent">                        
                                Hello &lt;?js text(input.name); ?&gt;! I am a JavaScript Client Page
                            </div>
                        &lt;/p&gt;
                    </div>
                &lt;/body&gt;
           </div>
           &lt;/html&gt;      
        </div>
        
        <h4>Invoking the Page from Client Code</h4>

        <ol>
            <li>
                In the <span class="file-name">JavaScriptClientPages</span> directory (i.e. the 
                directory where you extracted the original distribution), create a new page 
                named HelloWorld.html
            </li>
            <li>
                Add a reference to the JSCP JavaScript library to the &lt;head&gt; element:
                <div class="code">
    &lt;script type="text/javascript" href="JSClientPages.js"&gt;&lt;/script&gt;
                </div>
            </li>
            <li>
                Add a request to the JSCP compiler for the HelloWorld page you have just
                created (<span class="file-name">HelloWorld.xml</span>)
                <div class="code">
    &lt;script type="text/javascript" href="JSClientPage.php?page=<span class="highlight">HelloWorld.xml</span>"&gt;&lt;/script&gt;
                </div>            
            </li>
            <li>
                Add the XHTML code for user input to the body:
                <div class="code">
    Your Name: &lt;input type="text" name="name" id="input-name" value="John Doe" /&gt;<br />
    &lt;br /&gt;<br />
    &lt;button onclick="go(); return false;"&gt;Go!&lt;/button&gt;<br />                
    &lt;div id="hello-world-container"&gt;&lt;/div&gt;
                </div>
            </li>
            <li>
                Create an event handler function that renders the JavaScript
                client page:
                <div class="code">
    &lt;script type="text/javascript"&gt;
        <div class="indent">
            <span class="keyword">function</span> go() {
            <div class="indent">
                JSClientPage.render(
                    <div class="indent">
                        'HelloWorld',               // the name of the page to render (from the meta tag)<br />
                        'hello-world-container',    // The destination container
                        {
                            <div class="indent">
                                name: document.getElementById('input-name').value
                            </div>
                        }
                    </div>
                );
            </div>
        }
        </div>
    &lt;/script&gt;            
                </div>
            </li>
        </ol>
        <p>
            That's it! The programming part is done. 
        </p>    
        <h2>Testing your Application</h2>
        <ol>
            <li>Make sure that your Web server (e.g. Apache on Unix or IIS on Windows) is 
                running. If it is not, start it.</li>        
            <li>Open a Web browser and point it to the URL corresponding to the 
                JavaScriptClientPages directory.
                <div class="example">
                    <div class="label">Example:</div>
                    <a href="#">http://localhost/JavaScriptClientPages</a>
                </div>
                </li>
            <li>Type your name in the <span class="ui-element">Your Name</span> field</li>
            <li>Click on the Go button</li>
            <li>The page will be rendered below the Go button, and it will say "hello" to you.
            
            
            
            
            </li>
        </ol>
    </div>
    <div id="footer">
        <p>
            <a href="http://validator.w3.org/check?uri=referer">
                <img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict"
                    height="31" width="88" /></a> <span class="copyright">DiXon-JSClientPages &copy; 2008
                        by Artem Ploujnikov. All Rights Reserved.</span>
        </p>
    </div>
</body>
</html>
